<template>
  <common-search :show-item="2" :col-layout="{xxl: 6, xl:8, lg: 8, md: 12, sm: 24, xs: 24}" v-model="query" :formItems="formItems" @search="onSearch" @reset="onReset"></common-search>
  <a-button type="primary" @click="exportData" :loading="uploadLoading" v-modulePerm="['shippingSku:export']">
    <template #icon>
      <ExportOutlined />
    </template>
    导出
  </a-button>
  <common-table
      :columns="columns"
      :dataSource="dataList"
      v-model:localPagination="page"
      @paginationChange="onPageChange"
      v-model:loading="loading"
      :rowKey="(record) => record.id"
      :scroll="{ x: 'max-content'}"
  ></common-table>
</template>
<script>
export default {
  name:'firstShipping-shippingSku'
}
</script>
<script setup>
import { ref } from "vue";
import CommonSearch from "@/components/commonSearch/index.vue";
import CommonTable from "@/components/commonTable/index.vue";
import {useSearchTable} from "@/hooks/table/useSearchTable";
import {getContainerSku} from "@/api/firstShipping/shippingSku.js";
import {postFile} from "@utils/service/index.js";
import {message} from "ant-design-vue";
import dayjs from "dayjs";
import {getBeforeMonthDate} from "@utils/utils.js";
const uploadLoading = ref(false);
const columns = [
  {
    "dataIndex": "sku",
    "title": "仓库SKU",
    "align": "center",
    "fieldType": "String"
  },
  {

    "dataIndex": "stpoCode",
    "title": "头程计划",
    "align": "center",
    "fieldType": "String"
  },
  {

    "dataIndex": "containerNo",
    "title": "柜号",
    "align": "center",
    "fieldType": "String"
  },
  {

    "dataIndex": "receivingStatus",
    "title": "头程状态",
    "align": "center",
    "fieldType": "String"
  },
  {

    "dataIndex": "qty",
    "title": "数量",
    "align": "center",
    "fieldType": "String"
  },
  {

    "dataIndex": "onloadDate",
    "title": "装柜日期",
    "align": "center",
    "fieldType": "Date"
  },
  {

    "dataIndex": "etdDate",
    "title": "ETD",
    "align": "center",
    "fieldType": "Date"
  },
  {
    "dataIndex": "atdDate",
    "title": "ATD",
    "align": "center",
    "fieldType": "Date"
  },
  {

    "dataIndex": "etaDate",
    "title": "ETA",
    "align": "center",
    "fieldType": "Date"
  },
  {

    "dataIndex": "ataDate",
    "title": "ATA",
    "align": "center",
    "fieldType": "Date"
  },
  {

    "dataIndex": "warehouseCode",
    "title": "仓库编码",
    "align": "center",
    "fieldType": "String"
  },
  {

    "dataIndex": "receiptDate",
    "title": "送仓日期",
    "align": "center",
    "fieldType": "Date"
  }
]
const formItems = ref([
  {
    label:'柜号',
    type:'input',
    field:'containerNo',
  },
  {
    label:'装柜日期',
    type:'rangePicker',
    field:'time1',
    showTime: false,
  },
  {
    label:'ETA',
    type:'rangePicker',
    field:'time2',
    showTime: false,
  },
  {
    label:'ATA',
    type:'rangePicker',
    field:'time3',
    showTime: false,
  },
  {
    label:'送仓日期',
    type:'rangePicker',
    field:'time4',
    showTime: false,
  },
  {
    label:'仓库编码',
    type:'input',
    field:'warehouseCode',
  },
  {
    label:'仓库SKU',
    type:'input',
    field:'sku',
  },
  {
    label:'头程计划',
    type:'input',
    field:'stpoCode',
  },
])
const { dataList, query, loading, page, search, reset, onPageChange } = useSearchTable({
  searchAPI: getContainerSku,
  queryFactory: () => {
    return {
      time1: getBeforeMonthDate(3)
    }
  },
  beforeSearch:()=>{
    //处理日期
    if(query.value.time1){
      query.value.onloadDateBegin = query.value.time1[0]
      query.value.onloadDateEnd = query.value.time1[1]
    }else{
      delete query.value.onloadDateBegin
      delete query.value.onloadDateEnd
    }
    if(query.value.time2){
      query.value.etaDateBegin = query.value.time2[0]
      query.value.etaDateEnd = query.value.time2[1]
    }else{
      delete query.value.etaDateBegin
      delete query.value.etaDateEnd
    }
    if(query.value.time3){
      query.value.ataDateBegin = query.value.time3[0]
      query.value.ataDateEnd = query.value.time3[1]
    }else{
      delete query.value.ataDateBegin
      delete query.value.ataDateEnd
    }
    if(query.value.time4){
      query.value.receiptDateBegin = query.value.time4[0]
      query.value.receiptDateEnd = query.value.time4[1]
    }else{
      delete query.value.receiptDateBegin
      delete query.value.receiptDateEnd
    }
  }
});
const exportData = async () => {
  try{
    uploadLoading.value = true
    if(!query.value.time1){
      return message.error('请选择装柜日期')
    }
    // 使用Day.js解析日期
    const d1 = dayjs(query.value.time1[0]);
    const d2 = dayjs(query.value.time1[1]);

    // 计算两个日期之间的月数
    const monthsDiff = d2.diff(d1, 'months');
    if(monthsDiff >= 12){
      return message.error('时间跨度不能超过12个月');
    }
    const res = await postFile('/container/sku/export','post',query.value,'船舱sku明细.xlsx')
    message.success('导出成功')
  }catch (e){
    message.error(e)
  }finally {
    uploadLoading.value = false
  }
}
const onSearch = () => {
  if(!query.value.time1){
    return message.error('请选择装柜日期')
  }
  // 使用Day.js解析日期
  const d1 = dayjs(query.value.time1[0]);
  const d2 = dayjs(query.value.time1[1]);

// 计算两个日期之间的月数
  const monthsDiff = d2.diff(d1, 'months');
  if(monthsDiff >= 12){
    return message.error('时间跨度不能超过12个月');
  }
  search()
}
const onReset = () => {
//   // 使用Day.js解析日期
//   const d1 = dayjs(query.value.time1[0]);
//   const d2 = dayjs(query.value.time1[1]);
//
// // 计算两个日期之间的月数
//   const monthsDiff = d2.diff(d1, 'months');
//   if(monthsDiff >= 12){
//     return message.error('时间跨度不能超过12个月');
//   }
  reset()
}
</script>
<style scoped>

</style>
